import {ConfigProvider, MenuProps, theme} from "antd";
import {Layout, Menu, message} from 'antd';
import './css/AppMenu.css'
import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
import {MainPage} from "./pages/MainPage";
import {getSqlStatements, SqlPage, SqlStatementType} from "./pages/SqlPage";
import {Description} from "./pages/Description";
import {DataSource, DataSourceType, getDataSources} from "./pages/DataSource";
import {AppContext} from "./utils/Context";
import {useEffect, useState} from "react";
import {observer} from "mobx-react";
import {themeInstance} from "./utils/theme";

const {Content, Sider} = Layout;
type MenuItem = Required<MenuProps>['items'][number];

const menuItems: MenuItem[] = [
    {key: '/mainPage', label: '主页'},
    {key: '/dataSource', label: '数据源'},
    {key: '/sql', label: '常用sql'},
    {key: '/description', label: '表说明'}
];

export const AppMenu: React.FC = observer(() => {
    const [dataSources, setDataSources] = useState<DataSourceType[]>([]);
    const [sqlStatements, setSqlStatements] = useState<SqlStatementType[]>([]);
    const location = useLocation();
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const menuClick: MenuProps['onClick'] = (e) => {
        navigate(e.key, {replace: true});
    }
    useEffect(() => {
        getDataSources((response) => {
            setDataSources(JSON.parse(response).body);
        });
        getSqlStatements((response) => {
            setSqlStatements(JSON.parse(response).body);
        });
    }, []);
    return (
        <ConfigProvider theme={{
            algorithm: themeInstance.currentTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
        }}>
            <AppContext.Provider value={{dataSources, setDataSources, sqlStatements, setSqlStatements, messageApi}}>
                {contextHolder}
                <Layout style={{minHeight: '100vh'}}>
                    <Sider>
                        <Menu
                            className="AppMenu"
                            mode="inline"
                            theme={themeInstance.currentTheme}
                            items={menuItems}
                            onClick={menuClick}
                            selectedKeys={[(location.pathname === '/' || location.pathname === '/index.html') ? '/mainPage' : location.pathname]}
                        />
                    </Sider>
                    <Layout style={{padding: '0 24px 24px'}}>
                        <Content style={{padding: 24, margin: 0}}>
                            <Routes>
                                <Route index path="/" element={<MainPage/>}></Route>
                                <Route path="/index.html" element={<MainPage/>}></Route>
                                <Route path="/mainPage" element={<MainPage/>}></Route>
                                <Route path="/dataSource" element={<DataSource/>}></Route>
                                <Route path="/sql" element={<SqlPage/>}></Route>
                                <Route path="/description" element={<Description/>}></Route>
                            </Routes>
                        </Content>
                    </Layout>
                </Layout>
            </AppContext.Provider>
        </ConfigProvider>
    );
});